<!DOCTYPE HTML >
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link type="text/css" rel="stylesheet" href="../../template/css/com/com.css" />
	<link type="text/css" rel="stylesheet" href="../../template/css/list/style.css" />
	<link rel="stylesheet" href="../../resource/weuimin.css" />
	<link rel="stylesheet" href="../../resource/jinsuistyle.css" />
	<script src="../../template/js/jquery.js"></script>
	<script type="text/javascript" src="../../script/constants.js"></script>
	<script type="text/javascript" charset="UTF-8" src="../../script/naes.js"></script>
	<script src="../../script/api.js"></script>
	<title>无楼层信息房间选择界面</title>
	<style  type="text/css">
		* {
			padding: 0px;
			margin: 0px;
		}
		.item{
			 width：100%;
			 height:100px;
			 float: :left;
				border-bottom: 1px solid #aaaaaa;
		}
		.item, .text {
				display: -webkit-box;
		}

		.img {
				margin:8px;
				width: 84px;
				height: 84px;

		}
		.text-title{
				margin-top: 5px;
				font-size: 18px;
				height: 25px;
				line-height: 25px;
				color: #000000;
		}

		img {
				width: 100%;
				display: block;
		}

		.text {
			/*background-color: red;*/
			/*width: 40%;*/
				-webkit-box-flex: 1;
				-webkit-box-orient: vertical;
				margin: 0 5px;
		}

		.text-price {
				padding: 2px 0;
		}

		.new-price {
				line-height:22px;
				font-size: 20px;
				color: red;
				font-family: Impact, Arail, sans-serif;
				font-weight: bold;
		}


	.address {
		/*设置超过DIV后隐藏*/
		 overflow: hidden;
		text-overflow: ellipsis;
		 white-space: nowrap;

		margin-left: 5px;
		line-height: 18px;
	}

	.jrjztb{

		position :absolute;
		right:10px;
		width:65px;
		height:25px;
		background-color:#F99D1C;
		margin-top:20px;
		border-radius:4px 4px 0 0;
		border:1px solid #F99D1C;

		text-align:center;
		color: #FFFFFF;
	}
	.zxf{
		position :absolute;
		right:10px;
		width:65px;
		height:15px;
		background-color:#EFE8E8;
		margin-top:45px;
		border-radius:0 0 4px 4px;
		border:1px solid #F99D1C;
		line-height:15px;
		font-size:smaller;
		text-align:center;
		color: #F99D1C;
	}
	.yxfjList{
		 width: 100%;
		 height:100%;

		 position:relative;
		 overflow: hidden; /* auto | scroll */
	 -webkit-overflow-scrolling: touch;
	}

	.quantityOfRooms{
		width:20%;
		background: #FFFFFF;
		margin-left:2%;
		margin-right: 2%;
		margin-top: 2px;
	  margin-buttom: 2px;
		line-height: 24px;
		font-size: 15px;
		height:24px;
		border: 1px solid black;
		float:left;
		text-align:center;
	}


	</style>
</head>

<body>
	<header id="statusBar">
		<div style="height:75px;background: #298cb4;display: table;width: 100%;">
			<div style="height:50px;margin-top: 25px;line-height: 50px;color: #ffffff;background: #1e6887;">
				<div style="width: 26%;margin-left: 3%;font-size: 16px;float: left;" onclick="api.closeWin();">
					返回
				</div>
				<div id="hotel_name"  style="text-align: center;font-weight:bold;width: 50%;font-size: 16px;float: left;">

				</div>
			</div>
		</div>
	</header>
	  <div id="hotel_pic" style="height:150px;width:100%;margin: 0 auto;"></div>
			<!-- img<div id="hotel_pic" style="height:150px;width:100%;margin: 0 auto;background:url(../../image/hotel_bg.jpg)"></div> -->
    	<!-- <img id="hotel_pic" style="height:150px;width:100%;background:url" src="../../image/hotel_bg.jpg"></img> -->
		<!-- <img src="../../image/hotel_bg.jpg" style="width:40%;height:110px;float:left;" /> -->
				<div style="width:100%;height:50px;background:#AAA">
					<div id="startTime" style="width:40%;height:50px;line-height:50px;font-size:15px;float:left">入住：</div>
					<div id="endTime" style="width:40%;height:50px;line-height:50px;font-size:15px;float:left">离店：</div>
					<div id="ddate" style="width:20%;height:50px;line-height:50px;font-size:18px;float:left">共1晚</div>
				</div>
	<div style="height:240px;">
		<div id="roomsInfo" class="item" >
		</div>
	</div>
		<div  id="quantityOfRooms"   style="width: 72%;bottom: 60px;position: absolute;background: #EEEEEE;height:60px;display:none">

					<div id="quantityOfRooms1" class="quantityOfRooms" onclick="sureQuantityOfRooms(1)">1间</div>
					<div id="quantityOfRooms2" class="quantityOfRooms" onclick="sureQuantityOfRooms(2)">2间</div>
					<div id="quantityOfRooms3" class="quantityOfRooms" onclick="sureQuantityOfRooms(3)">3间</div>
					<div id="quantityOfRooms4" class="quantityOfRooms" onclick="sureQuantityOfRooms(4)">4间</div>
					<div id="quantityOfRooms5" class="quantityOfRooms" onclick="sureQuantityOfRooms(5)">5间</div>
					<div id="quantityOfRooms6" class="quantityOfRooms" onclick="sureQuantityOfRooms(6)">6间</div>
					<div id="quantityOfRooms7" class="quantityOfRooms" onclick="sureQuantityOfRooms(7)">7间</div>
					<div id="quantityOfRooms8" class="quantityOfRooms" onclick="sureQuantityOfRooms(8)">8间</div>


		</div>
	<div  style="width: 100%;bottom: 0;position: absolute;background: #ffffff;">

				<div id="yxfjList" class="yxfjList" style="height: 60px;line-height: 60px;margin-left:2%;float: left;width: 50%;">
					已选房间&nbsp;&nbsp;
				</div>
					<div id="the_quantityOfRooms" style="height: 60px;line-height: 60px;float: left;width: 20%;display:none" onclick="showOrHide_quantityOfRooms()">1间▲</div>
					<!-- ▲▼ -->
				<div style="width: 28%;background: #1e6887;height: 60px;float: right;color: #ffffff;font-size: 20px;text-align: center;line-height: 60px;" onclick="bookHotel();">
				 提交
				</div>
	</div>
	<script type="text/javascript">
		var data;
		var phone;
		var hotelId;
		var startTime;
		var endTime;
		var pic;
		var roomIdArr = new Array();
		var the_NumOfRooms = 1;
		var orderRoom_price;
		window.apiready = function() {
			// phone = $api.getStorage("dl_phone");
			phone = 15680030061;
			pic = api.pageParam.pic;
			hotelId = api.pageParam.hotelId;
			hotel_name = api.pageParam.hotel_name;
		  startTime = api.pageParam.startTime;
		  endTime = api.pageParam.endTime;
		  ddate = api.pageParam.ddate;
			console.log(hotelId);
			$("#startTime").html('入住：'+startTime);
			$("#endTime").html('离店：'+endTime);
			$("#ddate").html('共'+ddate+'晚');
			$("#hotel_name").html(hotel_name);
			quertRoomsTypeByHotelId();
			setThePicturesOfHotel();
		}

  //显示或者隐藏房间数量
	function showOrHide_quantityOfRooms() {
	 if($('#quantityOfRooms').css('display')=='none'){
		   $("#the_quantityOfRooms").html(the_NumOfRooms+"间▼")
				$("#quantityOfRooms").show();
				for(var i=0;i<9;i++){
						$("#quantityOfRooms"+i).css('background','#FFFFFF');
				}
 	$("#quantityOfRooms"+the_NumOfRooms).css('background','#999999');


		}else if($('#quantityOfRooms').css('display')=='block'){
			$("#the_quantityOfRooms").html(the_NumOfRooms+"间▲")
				$("#quantityOfRooms").hide();
		}
	}
	//房间数量选择
	function sureQuantityOfRooms(num) {
		the_NumOfRooms=num;
		for(var i=0;i<9;i++){
				$("#quantityOfRooms"+i).css('background','#FFFFFF');
		}
		$("#quantityOfRooms"+the_NumOfRooms).css('background','#999999');
		$("#the_quantityOfRooms").html(the_NumOfRooms+"间▲")
			$("#quantityOfRooms").hide();
	}

  //设置酒店的滚动图片
	function setThePicturesOfHotel() {
		var offset = $api.offset($api.dom('#hotel_pic'));
		var height = $("#hotel_pic").height();
		var width = $("#hotel_pic").width();
		var UIScrollPromptView = api.require('UIScrollPromptView');
		UIScrollPromptView.open({
				rect: {
						x: offset.l,
						y: offset.t,
						w: width,
						h: height
				},
				data: {
						paths: pic,
						captions: [],
						prompts: pic
				},
				styles: {
						caption: {
								height: 35,
								color: '#E0FFFF',
								size: 13,
								bgColor: '#696969',
								position: 'bottom'
						},
						indicator: {
								align: 'center',
								color: '#FFFFFF',
								activeColor: '#298cb4'
						},
						prompt: {
								button: {
										normal: '',
										highlight: '',
										x: 0,
										y: 100,
										w: 60,
										h: 40
								},
								x: 0,
								y: 50,
								w: 160,
								h: 90,
								contentMode: 'scaleToFill',
								animation: true
						}
				},
				placeholderImg: '',
				contentMode: 'scaleToFill',
				interval: 3,
				fixedOn: '',
				loop: true,
				fixed: false
		});

	}
	//通过酒店ID查询该酒店下房间类型
	function quertRoomsTypeByHotelId() {
		var callback = function(ret, err) {
				console.log(JSON.stringify(ret));
				if (ret) {
					var data = ret.list;
					var html="";
					for(i in data){
						var picUrl;
						if(typeof(data[i].picUrl[0])=='undefined'){
							picUrl="../../image/noimage.png";
						}else {
							picUrl	 = data[i].picUrl[0].URL;
						}
						var str = "";    //用于存放有窗|大床|无早等信息

						if(typeof(data[i].WINDOW)!="undefined")
							str+=(data[i].WINDOW+"|");
						if(typeof(data[i].BED_TYPE)!="undefined")
							str+=(data[i].BED_TYPE+"|");
							if(typeof(data[i].BREAKFAST)!="undefined")
								str+=(data[i].BREAKFAST+"早|");

								html += '<li>'+
												'<div id="delete" class="item" style="width:100%;">'+
														'<div class="img" onclick=toDetail("'+hotelId+'","'+data[i].ID+'","'+data[i].NAME+'")>'+
																'<img src="'+picUrl+'" style="width:80px;height:80px;">'+
														'</div>'+
														'<div class="text" style="width:100%;" onclick=toDetail("'+hotelId+'","'+data[i].ID+'","'+data[i].NAME+'")>'+
																'<div class="text-title" style="font-size:large;color: #000000;">'+data[i].NAME+'</div>'+
															 '<div style="width:100%;" >'+str+
											         '&nbsp;&nbsp;&nbsp;&nbsp;'+
															 '</div>'+
																'<div class="text-price">'+
																		'<span class="new-price">￥'+data[i].PRICE+'</span>'+
																'</div>'+
														'</div>'+
														'<div class="jrjztb" onclick=orderRoom("'+hotelId+'","'+data[i].ID+'","'+data[i].NAME+'","'+data[i].PRICE+'")>预订</div>'+
													'<div class="zxf" onclick=orderRoom("'+hotelId+'","'+data[i].ID+'","'+data[i].NAME+'","'+data[i].PRICE+'")>在线付</div>'+
												'</div>'+
										'</li>';
					}
					$("#roomsInfo").html(html);

				}
		}
		var parameter = {"hotelId":hotelId};
			apiAjax(JSON.stringify(parameter),url.quertRoomsTypeByHotelId,callback);
	}
	/**
	/hotelId:  酒店Id
	/roomTypeId:房间类型ID
	/roomName：房间名
	*/
  function orderRoom(hotelId,roomTypeId,roomName,price) {
		roomIdArr = new Array();
		orderRoom_price = price;
		   $("#yxfjList").html('	已选房间:&nbsp;&nbsp;'+roomName);
			//  $("#the_quantityOfRooms").css('display','block');
			 $("#the_quantityOfRooms").show();
			 roomIdArr.push(roomName);
  	// alert("hotelId:"+hotelId+"*******roomTypeId："+roomTypeId+"*****roomName:"+roomName);
  }
	//打开房间详细信息
	function toDetail(jdid,roomTypeId,roomTypeName){
			var width = document.documentElement.clientWidth;
			var height = document.documentElement.clientHeight;
			var xzdate = $("#nowTime").val();
					api.openFrame({
					name: 'room_info',
					url: './room_info.html',
					rect: {
						x:0,
						y:180,
						w:width,
						h:height-180
					},
					pageParam:{
						roomTypeId:roomTypeId,
						jdid:jdid,
						roomTypeName:roomTypeName,
						xzdate:xzdate,
						stDate:startTime,
						edDate:endTime
					}
					});
					return false;
	}

	function bookHotel(){

		//alert(roomIdArr.length);
		if(roomIdArr.length==0){
			alert("请先选择房间！");
			return false;
		}
		var width = document.documentElement.clientWidth;
		var height = document.documentElement.clientHeight;
		// var jstitle = $('#jstitle').text();
		// var phone = $api.getStorage("dl_phone");
		if(phone == undefined || phone == "undefined"){
			 api.alert({msg: "请先登录"});
			 api.openWin({
							name: 'login',
							url: '../login.html'
					 });
			 return;
		}
		api.openWin({
					name: 'book_hotel',
					url: './book_hotel.html',
					pageParam:{
						roomIdArr:roomIdArr,
						jstitle:'',
						startTime:startTime,
						endTime:endTime,
						merid: '',
						flag : 0,
						num: the_NumOfRooms,
						price : orderRoom_price
					}
				});
	}
	</script>
</body>

</html>
